Vue.component('v-chart', VueECharts)
new Vue({
    el: '#app',
    data() {
        return {
            isReady: false, //数据是否已经准备好,防止页面闪现大括号{{}}
            activeDialogIndex:'',//模态窗索引
            stat1: {
                chartOption:{}
            },
            dialog2: {//第二个弹出框统计，（企业检查缺陷分析）
                dstat1:{
                    chartOption:{}
                },
                dstat2:{
                    chartOption:{}
                },
                dstat3:{
                    chartOption:{}
                },
                dstat4:{
                    chartOption:{}
                },
            },
            dialog4: {//第4个弹出框统计，（企业抽样检测不合格项目分析）
                dstat1:{
                    chartOption:{}
                },
                dstat2:{
                    chartOption:{}
                }
            },
            dialog5: {//第5个弹出框统计，（企业投诉举报情况分析）
                dstat1:{
                    chartOption:{}
                },
                dstat2:{
                    chartOption:{}
                }
            },
            dialog6: {//第6个弹出框统计，（企业异常/不良反应情况分析）
                dstat1:{
                    chartOption:{}
                },
                dstat2:{
                    chartOption:{}
                }
            }
        }
            
    },
    created() {
        setTimeout(() => {
            this.isReady = true
        }, 200)
        this.createStat1()
        
        // this.createDialog4Stat1()
        // this.createDialog4Stat2()
    },
    methods: {
        showDiaLog(index){//显示弹框
            this.activeDialogIndex = index
        },
        hideDialog(){//隐藏弹窗
            this.activeDialogIndex = ''
        },
        createStat1() { //企业风险类型占比
            var dataList =[{ value:41, name: '投诉举报' }, { value: 29, name: '不良反应' }, { value: 18, name: '抽样检测' },{ value: 12, name: '监督检查' }]
            this.stat1.chartOption = AllOptions.createOption1(dataList)
        },
        createDialog2Stat1(){//历年企业检查缺陷情况
            var lableList = ['厂房与设施', '确认与验证', '文件管理', '质量控制与质量保证','机构与人员']
            var yearLable = ['2017年','2018年','2019年']
            var dataList = [
                [20, 18, 25,28,19],
                [30, 28, 35,38,29],
                [40, 38, 45,48,19]
            ]
            this.dialog2.dstat1.chartOption = AllOptions.createOption2(lableList,yearLable, dataList)
        },
        createDialog2Stat2(){//严重缺陷
            var lableList = ['厂房与设施', '确认与验证', '文件管理', '质量控制与质量保证','机构与人员','物料与产品']
            var dataList = [20, 18, 25,28,19,20]
            this.dialog2.dstat2.chartOption = AllOptions.createOption3(lableList, dataList,'rgba(255, 41, 42, 1)')
        },
        createDialog2Stat3(){//主要缺陷
            var lableList = ['厂房与设施', '确认与验证', '文件管理', '质量控制与质量保证','机构与人员','物料与产品']
            var dataList = [20, 18, 25,28,19,20]
            this.dialog2.dstat3.chartOption = AllOptions.createOption3(lableList, dataList,'rgba(248, 231, 28, 1)')
        },
        createDialog2Stat4(){//一般缺陷
            var lableList = ['厂房与设施', '确认与验证', '文件管理', '质量控制与质量保证','机构与人员','物料与产品']
            var dataList = [20, 18, 25,28,19,20]
            this.dialog2.dstat4.chartOption = AllOptions.createOption3(lableList, dataList,'rgba(16, 211, 91, 1)')
        },
        createDialog4Stat1(){//历年企业抽检不合格项目情况
            var lableList = ['水分', '效价', '装量', '鉴别','无菌']
            var yearLable = ['2017年','2018年','2019年']
            var dataList = [
                [20, 18, 25,28,19],
                [30, 28, 35,38,29],
                [40, 38, 45,48,19]
            ]
            this.dialog4.dstat1.chartOption = AllOptions.createOption2(lableList,yearLable, dataList)
        },
        createDialog4Stat2(){//企业抽样检测不合格项目分析
            var dataList = [
                
                {name:'含量',value:18},
                {name:'无菌',value:13},
                {name:'性状',value:8},
                {name:'鉴别',value:7},
                {name:'效价',value:36},
            ]
            var colors = ['rgba(232, 147, 8, 1)','rgba(50, 67, 238, 1)','rgba(255, 41, 42, 1)','rgba(46, 170, 72, 1)','rgba(175, 19, 254, 1)']
            this.dialog4.dstat2.chartOption = AllOptions.createOption4(dataList,colors)
        },
        createDialog5Stat1(){//历年企业投诉举报情况
            var lableList = ['质量控制与质量保证', '文件管理', '确认与验证', '厂房与设施','机构与人员']
            var yearLable = ['2017年','2018年','2019年']
            var dataList = [
                [20, 18, 25,28,19],
                [30, 28, 35,38,29],
                [40, 38, 45,48,19]
            ]
            this.dialog5.dstat1.chartOption = AllOptions.createOption2(lableList,yearLable, dataList)
        },
        createDialog5Stat2(){//企业投诉举报情况查询
            var dataList = [
                
                {name:'异常反应',value:18},
                {name:'产品质量',value:46},
                {name:'外包装',value:36}
            ]
            var colors = ['rgba(51, 204, 118, 1)','rgba(238, 158, 50, 1)','rgba(85, 19, 254, 1)']
            this.dialog5.dstat2.chartOption = AllOptions.createOption4(dataList,colors)
        },
        createDialog6Stat1(){//一般缺陷
            var lableList = ['2014年', '2015年', '2016年', '2017年','2018年']
            var dataList = [200, 180, 250,200,190,200]
            this.dialog6.dstat1.chartOption = AllOptions.createOption3(lableList, dataList,'rgba(242, 49, 50, 1)','例')
        },
        createDialog6Stat2(){//异常/不良反应分析
            var dataList = [
                {name:'一般异常',value:18},
                {name:'死亡异常',value:46},
                {name:'严重异常',value:36}
            ]
            var colors = ['rgba(51, 204, 118, 1)','rgba(238, 158, 50, 1)','rgba(85, 19, 254, 1)']
            this.dialog6.dstat2.chartOption = AllOptions.createOption4(dataList,colors)
        },
        showCpDialog(item){//产品列表弹窗
            this.activeDialogIndex = 1
            this.$nextTick(()=>{
                $('#modal1').modal()
            })
        },
        showQxDialog(){//企业检查缺陷分析弹窗
            this.activeDialogIndex = 2
            this.$nextTick(()=>{
                $('#modal2').modal()
                this.createDialog2Stat1()
                this.createDialog2Stat2()
                this.createDialog2Stat3()
                this.createDialog2Stat4()
            })
        },
        dstat2Click(item){//点击严重缺陷
            $('#modal2').modal('hide')
            console.log('dstat2Click',item)
            this.activeDialogIndex = 3;
            this.$nextTick(()=>{
             $('#modal3').modal()
             })
        },
        dstat3Click(item){//点击主要缺陷
            $('#modal2').modal('hide')
            console.log('dstat2Click',item)
            this.activeDialogIndex = 3;
            this.$nextTick(()=>{
            $('#modal3').modal()
            })
        },
        dstat4Click(item){//点击一般缺陷
            $('#modal2').modal('hide')
            console.log('dstat2Click',item)
            this.activeDialogIndex = 3;
            this.$nextTick(()=>{
                $('#modal3').modal()
            })
        },
        backDialog(){//关闭弹窗
            $('#modal3').modal('hide');
            $('#modal2').modal('show');
        },
        showCyDialog(){//企业抽样检测不合格项目分析
            this.activeDialogIndex = 4
            this.$nextTick(()=>{
                $('#modal4').modal()
                this.createDialog4Stat1()
                this.createDialog4Stat2()
            })
        },
        showTsDialog(){//企业投诉举报情况分析
            this.activeDialogIndex = 5
            this.$nextTick(()=>{
                $('#modal5').modal()
                this.createDialog5Stat1()
                this.createDialog5Stat2()
            })
        },
        showYcDialog(){//企业异常/不良反应情况分析
            this.activeDialogIndex = 6
            this.$nextTick(()=>{
                $('#modal6').modal()
                this.createDialog6Stat1()
                this.createDialog6Stat2()
            })
        },
        submitForm(){

        },
        exportForm(){

        },
        goBack(){
            window.history.go(-1)
        }
    }
})